<template>
	<div class="groups">
		<ul class="group">
			<li v-if="feedsData.length > 1 && isSourceNews" class="group_more_button all_news">
				<a href="javascript:;" @click="refreshListDataHandle">全部新闻</a>
			</li>
			<li v-for="(item, index) in feedsData" v-if="feedsData.length > 0 && index < end">
				<GroupsItem @getSourceNews="getSourceNews" :isShowAll="isShowAll" :item="item" :index="index" :length="feedsData.length" @setContentHandle="setContentHandle" @getFeedsHandle="getFeedsHandle" :keys="keys"></GroupsItem>
			</li>
			<li v-if="feedsData.length > 30 && moreButtonShow" class="group_more_button">
				<a href="javascript:;" @click="moreClickHandle">更多新闻</a>
			</li>
			<li class="loadingbox" v-if="feedsData.length <= 0 && isLoaded === false">
				<div class="group_demo">
					<div class="group_demo_header"></div>
					<div class="group_demo_main"></div>
				</div>
			</li>
			<li class="loadingbox" v-if="feedsData.length <= 0 && isLoaded">
				<span class="loadingbox_tip">暂无结果</span>
			</li>
		</ul>
	</div>
</template>
<script>
	import Axios from "axios";
	import qs from "Qs";
	export default {
		name: 'groups',
		props:["feeds", "isShowAll", "keys", "len"],
		data: function(){
			return {
				isShowDialog: false,
				feedsData:[],
				dialogClassName:'zoomIn',
				dialogType:"more",
				isLoaded: false,
				content:'',
				start:0,
				end:30,
				moreButtonShow: true,
				isSourceNews: false
			}
		},
		watch:{
			feedsData:function(){
				this.$emit("setDataObject", {
					showTip: false
				})
			},
			feeds:function(v){
				const that = this;
				that.$nextTick(()=>{
					if (v.length === 0){
						that.$set(that, 'isLoaded', true)
					}else{
						that.mixAdsToList(v);	
					}
				})
			}
		},
		components:{
			GroupsItem: r => require.ensure([], () => r(require('../components/groupsitem.vue')), 'groupsitem')
		},
		mounted:function(){
			const that = this;
			that.$set(that, "isLoaded", false);
			this.$nextTick(() => {
				that.$set(that, "feedsData", this.$props.feeds)
			})
		},
		methods:{
			refreshListDataHandle(){
				this.$set(this, "isSourceNews", false)
				this.getFeedsHandle();
			},
			moreClickHandle(e){
				let count = this.$data.end+30;
				if (count <= this.$data.feedsData.length){
					if (count+30>this.$data.feedsData.length) {
						count+=30;
						this.$set(this, "end", count);
						this.$set(this, "moreButtonShow", false)
					}else{
						this.$set(this, "end", count)
					}
				}else{
					this.$set(this, "end", count);
					this.$set(this, "moreButtonShow", false)
				}
			},
			mixAdsToList:function(v){
				const that = this;
				that.getAdsList((ads) => {
					let data = v,
						resultData = [],
						adsIndex = [2,6,10,14,18],
						n=-1;
					$.each(data, (i, item) => {
						if (adsIndex.indexOf(i)> -1 && ads[n+1]){
							resultData.push(ads[n+1]);
						}else{
							resultData.push(item)
						}
					})
					that.$set(that, 'isLoaded', false)
					that.$set(that, 'feedsData', resultData);
					if (resultData.length === 0){
						that.$set(that, 'isLoaded', true)
					}
				})
			},
			getSourceNews:function(v){
				const that = this;
				this.$set(this, "moreButtonShow", false)
				Axios.post(this.$store.state.api.getSourceNews, qs.stringify({
					channel:v,
					count: 30,
					pn: 0
				})).then((res) => {
					console.log(res)
					if (res.data.status === 1){
						that.$set(that, "isSourceNews", true)
						that.mixAdsToList(res.data.data)
					}else{

					}
				}).catch((err) => {

				})
			},
			getFeedsHandle:function(){
				this.$emit("getFeedsHandle")
			},
			setContentHandle:function(v, type, className, isShowDialog){
				this.$set(this, "dialogType", type);
				this.$set(this, "dialogClassName", className);
				this.$set(this, "isShowDialog", isShowDialog);
				this.$set(this, "content", v)
			},
			getAdsList:function(callback){
				const that = this;
				Axios.post(this.$store.state.api.getAdsList).then((res) => {
					console.log(res)
					if (res.data.status === 1){
						callback && callback(res.data.data)
					}else{
						callback && callback([])
					}
				}).catch((err) => {

				})
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.groups{
		ul{
			&.group{
				li{
					margin:0 0 10/@base 0;
					background-color: #fff;
					&.group_more_button{
						margin:0;
						&.all_news{
							background-color: rgba(176,224,230, .8);
							padding:0;
							a{
								color:#666;
								padding:20/@base 0;
							}
						}
						a{
							padding:30/@base 20/@base;
							display: block;
							text-align: center;
							text-decoration: none;
							color:#999;
							font-size: 20/@base;
						}
					}
					&.loadingbox{
						background-color: transparent;
						span{
							&.loadingbox_tip{
								display: block;
								padding:60/@base 10/@base;
								font-size: 20/@base;
								text-align: center;
								color:#999;
							}
						}
					}
					.group_demo{
						.group_demo_header{
							padding:10/@base 10/@base 20/@base 20/@base;
							border-bottom:1/@base solid #e6e6e6;
							background-color: #fff;
							height:60/@base;
						}
						.group_demo_main{
							height:400/@base;
							background-color: #fff;
						}
					}
				}
			}
		}
	}
	.icon{
		&.more{
			background-size: 355px 344px;
			background-position: -331px -75px;
			width:24px;
			height:24px;
		}
	}
</style>